$(function () {
  // 页面刚一打开的时候  需要渲染加载之前的数据 显示出来
  load();
  $("#title").on("keydown", function (e) {
    if (e.keyCode == 13) {
      if ($(this).val() == "") {
        alert("请输入需要添加的todo事件哦");
      } else {
        // 敲下回车的时候  先读取本地存储的数据
        var local = getData();
        // 更新数据 拿到用户输入的数据 追加到local数组里
        local.push({ title: $(this).val(), done: false });
        // 然后存储给本地存储
        saveData(local); // 把这个新数据 作为实参 传递过去
        // 加载本地存储的数据 渲染到页面
        load();
        $(this).val("");
      }
    }
  });
  $("ol,ul").on("click", "a", function () {
    // 点击a按钮的时候  先获取本地存储的数据
    var data = getData();
    //  拿到当前点击a的索引号
    var index = $(this).attr("index");
    // 然后用splice()方法删除这个数组中相应索引号的 数据
    data.splice(index, 1);
    // 重新保存到本地存储
    saveData(data);
    // 重新加载渲染页面
    load();
  });
  $("ol,ul").on("click", ".ck", function () {
    // 点击复选框的时候 先获取本地存储的数据
    var data = getData();
    // 拿到当前点击的复选框的索引号  通过它的兄弟a的自定义属性 index
    var index = $(this).siblings("a").attr("index");
    // 得到当前复选框的checked状态  修改当前数据的done属性
    data[index].done = $(this).prop("checked");
    // 重新保存到本地存储
    saveData(data);
    // 重新渲染
    load();
  });
  $("ol").on("dblclick", "p", function () {
    // 双击之后 让当前p标签隐藏  让下一个元素 .txt 显示
    $(this).stop().hide().next().stop().show().focus();
    // 获取本地存储的数据
    var data = getData();
    // 拿到当前点击的索引号 修改数据
    var index = $(this).siblings("a").attr("index");
    $(this).next().val(data[index].title);
  });
  // 当.txt文本框失去焦点的时候
  $("ol").on("blur", ".txt", function () {
    // 拿到本地存储的数据
    var data = getData();
    // 拿到当前点击的索引号 修改数据
    var index = $(this).siblings("a").attr("index");
    data[index].title = $(this).val();
    // 重新保存到本地存储
    saveData(data);
    // 重新渲染
    load();
  });
  // 当.txt文本框被敲下回车的时候
  $("ol").on("keydown", ".txt", function (e) {
    if (e.keyCode == 13) {
      if ($(this).val() == "") {
        alert("不能修改为空哦");
      } else {
        // 拿到本地存储的数据
        var data = getData();
        // 拿到当前点击的索引号 修改数据
        var index = $(this).siblings("a").attr("index");
        data[index].title = $(this).val();
        // 重新保存到本地存储
        saveData(data);
        // 重新渲染
        load();
      }
    }
  });
  // 读取本地存储
  function getData() {
    var data = localStorage.getItem("todolist");
    // 如果本地存储的数据为空，则返回一个空数组  如果不为空 则返回里面的数据
    // 但注意数据为字符串格式  所以需要用JSON.parse()方法转换为对象格式
    return data == null ? [] : JSON.parse(data);
  }
  // 存储本地存储
  function saveData(data) {
    // 用一个data形参来接收新的数据  但注意 存储的时候 只能为字符串格式  所以需要用到JSON.stringify()方法进行转换
    localStorage.setItem("todolist", JSON.stringify(data));
  }
  // 加载渲染数据
  function load() {
    // 先读取本地存储的数据
    var data = getData();
    // 遍历之前 需要把ol里的内容先全部清空
    $("ol,ul").empty();
    // 遍历这个数据
    var todocount = 0; // 正在进行的件数
    var donecount = 0; // 已经完成的件数
    $.each(data, function (i, datas) {
      // 根据数据的数量生成相应个数的li
      if (datas.done) {
        // 如果当前数据的done属性为true 则添加到ul已经完成中
        $("ul").prepend(`<li><input class= 'ck' type='checkbox' checked><p>${datas.title}</p> <input type= 'text' class= 'txt'><a href='javascript:;'index = ${i}></a></li>`);
        donecount++;
      } else {
        // 如果当前数据的done属性为flase 则添加到ol正在进行中
        $("ol").prepend(`<li><input class= 'ck' type='checkbox' ><p>${datas.title}</p><input type= 'text' class= 'txt'><a href='javascript:;'index = ${i}></a></li>`);
        todocount++;
      }
    });
    $("#todocount").text(todocount);
    $("#donecount").text(donecount);
  }
});
